<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>企业用电</title>
    <!-- css of 3rd party  -->
    <link
      href="static/layui-2.3.0/css/layui.css"
      type="text/css"
      rel="stylesheet"
    />
    <link
      href="static/font-awesome-4.7.0/css/font-awesome.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <!-- css of this project  -->
    <link
      href="static/jtopo/css/jtopo-editor.css"
      type="text/css"
      rel="stylesheet"
    />
    <link href="static/jtopo/css/index.css" type="text/css" rel="stylesheet" />
  </head>

  <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header layui-bg-gray" style="margin-bottom: 5px">
        <a onclick="$('.custom-container-left').toggle()">
          <div class="layui-logo" style="cursor: pointer">编辑面板</div>
        </a>
        <!-- 顶部工具栏 -->
        <div class="layui-nav layui-layout-right">
          <!-- <input
            class="layui-input"
            id="queryText"
            style="display: inline-block; width: 150px; height: 25px"
            placeholder="输入关键词查找节点"
            onclick="layer.msg('这个功能自己尝试去实现吧')"
          /> -->
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="添加标题"
              onClick="initParams.title()"
            ></i>
            <span>标题</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="添加生产分组"
              onClick="initParams.product()"
            ></i>
            <span>生产</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="添加生产分组（带背景）"
              onClick="initParams.productBg()"
            ></i>
            <span>生产(带背景)</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="添加治污分组"
              onClick="initParams.zhiwu()"
            ></i>
            <span>治污</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="添加治污分组（带背景）"
              onClick="initParams.zhiwuBg()"
            ></i>
            <span>治污(带背景)</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="添加排放分组"
              onClick="initParams.paifang()"
            ></i>
            <span>排放</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="添加排放分组（带背景）"
              onClick="initParams.paifangBg()"
            ></i>
            <span>排放(带背景)</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="产治一体分组"
              onClick="initParams.chanzhi()"
            ></i>
            <span>产治一体</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-plus-circle toolbar-icon"
              aria-hidden="true"
              title="产治一体分组（带背景）"
              onClick="initParams.chanzhiBg()"
            ></i>
            <span>产治一体(带背景)</span>
          </div>

          <span style="padding: 0 20px"></span>
          <!-- <i
            class="fa fa-pencil-square-o toolbar-icon"
            aria-hidden="true"
            title="添加分组"
            onClick="$('.custom-add-alert').show()"
          ></i> -->
          <div class="layui-layout-right__item">
            <i
              class="fa fa-arrows toolbar-icon"
              aria-hidden="true"
              title="全屏查看"
              onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')"
            ></i>
            <span>全屏查看</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-align-center toolbar-icon"
              aria-hidden="true"
              title="居中显示"
              onClick="editor.utils.showInCenter()"
            ></i>
            <span>居中显示</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-eye toolbar-icon"
              aria-hidden="true"
              title="预览"
              onClick="editor.utils.showPic()"
            ></i>
            <span>预览</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-floppy-o toolbar-icon"
              aria-hidden="true"
              title="保存"
              onClick="editor.saveTopology(true)"
            ></i>
            <span>保存</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-clipboard toolbar-icon"
              aria-hidden="true"
              title="复制"
              onClick="editor.utils.cloneSelectedNodes()"
            ></i>
            <span>复制</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-times toolbar-icon"
              aria-hidden="true"
              title="删除"
              onClick="editor.utils.deleteSelectedNodes()"
            ></i>
            <span>删除</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-trash-o toolbar-icon"
              aria-hidden="true"
              title="清空"
              onClick="editor.utils.clearTopology()"
            ></i>
            <span>清空</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-search-plus toolbar-icon"
              aria-hidden="true"
              title="放大"
              onClick="editor.utils.scalingBig()"
            ></i>
            <span>放大</span>
          </div>
          <div class="layui-layout-right__item">
            <i
              class="fa fa-search-minus toolbar-icon"
              aria-hidden="true"
              title="缩小"
              onClick="editor.utils.scalingSmall()"
            ></i>
            <span>缩小</span>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="layui-row custom-container">
          <div class="custom-container-left">
            <div class="layui-side-scroll">
              <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">连线</h2>
                  <div class="layui-colla-content layui-show">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-link"
                            topo-linktype="line"
                            draggable="false"
                            onclick="editor.lineType='line'"
                          >
                            <img
                              class="link-icon-style link-icon-line-style"
                              id="link-line"
                              src="static/jtopo/img/line.png"
                            />
                            <br /><span>连线</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-link"
                            topo-linktype="foldline"
                            draggable="false"
                            onclick="editor.lineType='foldLine';editor.config.direction='horizontal';"
                          >
                            <img
                              class="link-icon-style link-icon-line-style"
                              id="link-foldline-h"
                              src="static/jtopo/img/foldline_horizontal.png"
                            />
                            <br /><span>折线(横向)</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-link"
                            topo-linktype="foldline"
                            draggable="false"
                            onclick="editor.lineType='foldLine';editor.config.direction='vertical';"
                          >
                            <img
                              class="link-icon-style link-icon-line-style"
                              id="link-foldline-v"
                              src="static/jtopo/img/foldline_vertical.png"
                            />
                            <br /><span>折线(纵向)</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-link"
                            topo-linktype="flexline"
                            draggable="false"
                            onclick="editor.lineType='flexLine';editor.config.direction='horizontal';"
                          >
                            <img
                              class="link-icon-style link-icon-line-style"
                              id="link-flexline-h"
                              src="static/jtopo/img/flexline_horizontal.png"
                            />
                            <br /><span>二次折线(横向)</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-link"
                            topo-linktype="flexline"
                            draggable="false"
                            onclick="editor.lineType='flexLine';editor.config.direction='vertical';"
                          >
                            <img
                              class="link-icon-style link-icon-line-style"
                              id="link-flexline-v"
                              src="static/jtopo/img/flexline_vertical.png"
                            />
                            <br /><span>二次折线(纵向)</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-link"
                            topo-linktype="curveline"
                            draggable="false"
                            onclick="editor.lineType='curveLine'"
                          >
                            <img
                              class="link-icon-style link-icon-line-style"
                              id="link-curveline"
                              src="static/jtopo/img/line_curveline.png"
                            />
                            <br /><span>曲线</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">总电</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="120"
                            topo-type="1"
                            topo-height="120"
                            draggable="true"
                            title="治污设备1的描述000000000"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/总线点位.jpg"
                              style="width: 60%; height: auto"
                            />
                            <br /><span>xx总电</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">生产设备</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="159"
                            topo-height="69"
                            topo-text-x="30"
                            topo-text-y="-25"
                            draggable="true"
                            title="xx生产设备"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/1.png"
                            />
                            <br /><span>xx生产设备</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="100"
                            topo-height="69"
                            topo-text-y="-30"
                            draggable="true"
                            title="xx生产设备"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/2.png"
                            />
                            <br /><span>xx生产设备</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="72"
                            topo-height="72"
                            draggable="true"
                            title="xx生产设备"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/产污设施.png"
                            />
                            <br /><span>xx生产设备</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">治污设备</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="159"
                            topo-height="69"
                            topo-text-x="30"
                            topo-text-y="-25"
                            draggable="true"
                            title="xx净化系统"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/3.png"
                            />
                            <br /><span>xx净化系统</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="100"
                            topo-height="70"
                            topo-text-y="-25"
                            draggable="true"
                            title="xx净化系统"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/4.png"
                            />
                            <br /><span>xx净化系统</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="52"
                            topo-height="64"
                            draggable="true"
                            title="xx净化系统"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/生物净化系统.png"
                            />
                            <br /><span>xx净化系统</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">排放装置</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="100"
                            topo-height="69"
                            topo-text-y="-25"
                            draggable="true"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/5.png"
                            />
                            <br /><span>xx排放设备</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="76"
                            topo-height="76"
                            draggable="true"
                            title="排污设备的描述000000000"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/排气口.png"
                            />
                            <br /><span>xx排放设备</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>

                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">电表</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-type="1"
                            topo-width="50"
                            topo-height="50"
                            topo-has-text="0"
                            draggable="true"
                            title="电表状态"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/置灰态.png"
                            />
                            <br /><span>电表</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>

                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">文字</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="90"
                            topo-height="40"
                            topo-has-text="0"
                            draggable="true"
                            title="生产"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/生产.png"
                            />
                            <br /><span>生产</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="90"
                            topo-height="40"
                            topo-has-text="0"
                            draggable="true"
                            title="治污"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/治污.png"
                            />
                            <br /><span>治污</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="90"
                            topo-height="40"
                            topo-has-text="0"
                            draggable="true"
                            title="排放"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/排放.png"
                            />
                            <br /><span>排放</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="90"
                            topo-height="40"
                            topo-has-text="0"
                            draggable="true"
                            title="产治一体"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/产治一体.png"
                            />
                            <br /><span>产治一体</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>

                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">箭头</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="30"
                            topo-height="30"
                            topo-has-text="0"
                            draggable="true"
                            title="箭头"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/箭头1.png"
                            />
                            <br /><span>箭头</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="30"
                            topo-height="30"
                            topo-has-text="0"
                            draggable="true"
                            title="箭头"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/箭头.png"
                            />
                            <br /><span>箭头</span>
                          </div>
                        </td>
                      </tr>

                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="19"
                            topo-height="47"
                            topo-has-text="0"
                            draggable="true"
                            title="长箭头"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/长箭头1.png"
                            />
                            <br /><span>长箭头</span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="19"
                            topo-height="47"
                            topo-has-text="0"
                            draggable="true"
                            title="长箭头"
                          >
                            <img
                              class="node-icon-style"
                              src="static/jtopo/img/长箭头.png"
                            />
                            <br /><span>长箭头</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">在线监测设备</h2>
                  <div class="layui-colla-content">
                    <table width="100%">
                      <tr>
                        <td width="100%" align="center">
                          <div
                            topo-div-type="topo-node"
                            topo-nodetype="SWITCH"
                            topo-width="30"
                            topo-height="30"
                            topo-has-text="0"
                            draggable="true"
                            title="在线监测设备"
                          >
                            <img
                              class="link-icon-custom-style"
                              src="static/jtopo/img/在线监测设备.png"
                            />
                            <br /><span>在线监测设备</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <!-- <div class="layui-colla-item">
                                <h2 class="layui-colla-title">网络设备</h2>
                                <div class="layui-colla-content">
                                    <table width="100%">
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SWITCH" draggable="true"
                                                    title="直接面向用户连接或访问网络的交换机">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_access_switch.png"/>
                                                    <br><span>接入层交换机</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SWITCH" draggable="true"
                                                    title="多台接入层交换机的汇聚点">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_convergence_switch.png"/>
                                                    <br><span>汇聚层交换机</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SWITCH" draggable="true"
                                                    title="位于核心层（网络主干部分的交换机）">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_core_switch.png"/>
                                                    <br><span>核心交换机</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SWITCH" draggable="true"
                                                    title="无线网路的接入点（Access Point）">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_router.png"/>
                                                    <br><span>无线AP</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SWITCH" draggable="true"
                                                    title="路由器">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_ap.png"/>
                                                    <br><span>路由器</span>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div> -->
                <!-- <div class="layui-colla-item">
                                <h2 class="layui-colla-title">安全设备</h2>
                                <div class="layui-colla-content">
                                    <table width="100%">
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SECURITY" draggable="true"
                                                    title="入侵防御系统">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_ips.png"/>
                                                    <br><span>IPS</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SECURITY" draggable="true"
                                                    title="Web应用防火墙">
                                                    <img class="node-icon-style" src="static/jtopo/img/icon_waf.png"/>
                                                    <br><span>WAF</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SECURITY" draggable="true"
                                                    title="防火墙">
                                                    <img class="node-icon-style" src="static/jtopo/img/icon_firewall.png"/>
                                                    <br><span>防火墙</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SECURITY" draggable="true"
                                                    title="漏洞扫描">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_xscan.png"/>
                                                    <br><span>漏洞扫描</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SECURITY" draggable="true"
                                                    title="负载均衡">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_balancing.png"/>
                                                    <br><span>负载均衡</span>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">服务器设备</h2>
                                <div class="layui-colla-content">
                                    <table width="100%">
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SERVER" draggable="true"
                                                    title="网络服务器">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_server.png"/>
                                                    <br><span>服务器</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SERVER" draggable="true"
                                                    title="跳板机/堡垒机">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_proxy_server.png"/>
                                                    <br><span>代理服务器</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SERVER" draggable="true"
                                                    title="数据库节点，用于存储数据">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_data_server.png"/>
                                                    <br><span>数据库服务器</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="100%" align="center">
                                                <div topo-div-type="topo-node" topo-nodetype="SERVER" draggable="true"
                                                    title="WEB服务器">
                                                    <img class="node-icon-style"
                                                        src="static/jtopo/img/icon_web_server.png"/>
                                                    <br><span>WEB服务器</span>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div> -->
              </div>
            </div>
          </div>
          <div class="custom-container-right">
            <div id="topology-body" class="topology-context">
              <!-- 节点右键菜单 -->
              <div id="node-menu" class="right-click-menu" style="z-index: 9">
                <div
                  class="fa fa-add-group menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>加入分组</span>
                </div>
                <div
                  class="fa fa-wrench menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>节点设置</span>
                </div>
                <div
                  class="fa fa-th-large menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>应用布局</span>
                </div>
                <div
                  class="fa fa-th-list menu-item"
                  id="change-node-text-pos"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>文字位置</span>
                </div>
                <div
                  class="fa fa-search-plus menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>放大(Shift+)</span>
                </div>
                <div
                  class="fa fa-search-minus menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>缩小(Shift-)</span>
                </div>
                <div
                  class="fa fa-rotate-right menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>顺时针旋转(Shift+U)</span>
                </div>
                <div
                  class="fa fa-rotate-left menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>逆时针旋转(Shift+I)</span>
                </div>
                <div
                  class="fa fa-times menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>删除节点(Delete)</span>
                </div>
                <div
                  class="fa fa-files-o menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>复制节点(Shift+C)</span>
                </div>
                <div
                  class="fa fa-mail-reply menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>撤销(Shift+Z)</span>
                </div>
                <div
                  class="fa fa-mail-forward menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>重做(Shift+R)</span>
                </div>
              </div>
              <!-- 应用布局选项(二级菜单) -->
              <div id="layout-menu" class="right-click-menu" style="z-index: 9">
                <div
                  class="fa fa-minus-circle menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>取消布局</span>
                </div>
                <div
                  class="fa fa-object-group menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>分组布局</span>
                </div>
                <div
                  class="fa fa-share-alt menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>树形布局</span>
                </div>
                <div
                  class="fa fa-dot-circle-o menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>圆形布局</span>
                </div>
              </div>
              <!-- 应用布局选项(二级菜单) -->
              <div
                id="add-group-menu"
                class="right-click-menu"
                style="z-index: 9"
              >
                111
              </div>
              <!-- 文字位置选项(二级菜单) -->
              <div
                id="node-text-pos-menu"
                class="right-click-menu"
                style="z-index: 9"
              >
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>顶部居左</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>顶部居中</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>顶部居右</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>中间居左</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>居中</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>中间居右</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>底部居左</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>底部居中</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>底部居右</span>
                </div>
              </div>
              <!-- 连线右键菜单 -->
              <div id="line-menu" class="right-click-menu" style="z-index: 9">
                <!--<div class="modeRightEdit" onMouseMove="this.style.backgroundColor='#c5e7f6'"-->
                <!--onMouseOut="this.style.backgroundColor=''"><span class="menuSpan">添加描述</span></div>-->
                <div
                  class="fa fa-wrench menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>连线设置</span>
                </div>
                <div
                  class="fa fa-times menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>删除连线</span>
                </div>
              </div>
              <!-- 舞台右键菜单 -->
              <div id="main-menu" class="right-click-menu" style="z-index: 9">
                <div
                  class="fa fa-search-plus menu-item"
                  onClick="editor.utils.scalingBig()"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>放大(Shift+)</span>
                </div>
                <div
                  class="fa fa-search-minus menu-item"
                  onClick="editor.utils.scalingSmall()"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>缩小(Shift-)</span>
                </div>
                <div
                  class="fa fa-trash-o menu-item"
                  onClick="editor.utils.clearTopology();"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>清空(Shift+Y)</span>
                </div>
                <div
                  class="fa fa-eye menu-item"
                  onClick="editor.utils.showPic();"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>预览(Shift+P)</span>
                </div>
                <div
                  class="fa fa-arrows menu-item"
                  onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>全屏查看(Shift+F)</span>
                </div>
                <div
                  class="fa fa-align-center menu-item"
                  onClick="editor.utils.showInCenter()"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>居中显示(Shift+G)</span>
                </div>
                <div
                  class="fa fa-floppy-o menu-item"
                  onClick="editor.saveTopology(true)"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>保存(Shift+S)</span>
                </div>
                <div
                  class="fa fa-question-circle menu-item"
                  onclick="alert('帮助文档')"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span id="showHelp">查看帮助(Shift+H)</span>
                </div>
                <div
                  class="fa fa-info-circle menu-item"
                  onclick="window.open('json_view.html', '当前拓扑结构JSON展示', '').document.write(editor.stage.toJson())"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span id="showJSON">查看拓扑JSON结构</span>
                </div>
              </div>
              <!-- 分组选项(二级菜单) -->
              <div
                id="group-mange-menu"
                class="right-click-menu"
                style="z-index: 9"
              >
                <div
                  class="fa fa-pencil-square-o menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>新建分组</span>
                </div>
                <div
                  class="fa fa-align-left menu-item"
                  id="align-group"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>对齐方式</span>
                </div>
              </div>
              <div
                class="right-click-menu"
                id="group-align-menu"
                style="z-index: 9"
              >
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>水平对齐</span>
                </div>
                <div
                  class="menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>垂直对齐</span>
                </div>
              </div>
              <div
                class="right-click-menu"
                id="container-mange-menu"
                style="z-index: 9"
              >
                <div
                  class="fa fa-pencil-square-o menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>修改配置</span>
                </div>
                <div
                  class="fa fa-add-group menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>加入分组</span>
                </div>
                <!-- <div
                  class="fa fa-columns menu-item"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''"
                >
                  <span>拆分</span>
                </div> -->
              </div>

              <canvas class="topology-context" id="topology-canvas">
                您的浏览器不支持HTML5!
              </canvas>
            </div>
          </div>
          <!-- <div class="layui-col-md2">
            <p style="text-align: center; font-size: 14px; padding-top: 20px">
              节点名称：
            </p>
            <p id="node-name" style="text-align: center; font-size: 14px">
              （鼠标悬浮节点查看）
            </p>
            <p style="text-align: center; font-size: 14px">当前时间：</p>
            <p id="current-time" style="text-align: center; font-size: 14px">
              （鼠标悬浮节点查看）
            </p>
            <p style="text-align: center; font-size: 20px; padding-top: 50%">
              还可以放置其他信息:
            </p>
            <p style="text-align: center; font-size: 20px">
              比如结合highcharts放一些节点联动的图表信息
            </p>
          </div> -->
        </div>
      </div>
      <div class="layui-form-item custom-add-alert">
        <div class="header">添加分组</div>
        <div class="layui-inline">
          <label class="layui-form-label">ID</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-id"
            />
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">分组名</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-name"
              value="分组1"
            />
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">宽度</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-width"
              value="200"
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">高度</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-height"
              value="200"
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">边框颜色</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-color"
              value="0,0,0"
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">背景颜色</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-bg-color"
              value=""
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-is-title"
              value=""
            />
          </div>
        </div>
        <div style="text-align: center">
          <button
            type="button"
            class="layui-btn"
            onclick="editor.utils.toAdd();"
          >
            确定
          </button>
          <button
            type="button"
            class="layui-btn"
            onclick="$('.custom-add-alert').hide()"
          >
            关闭
          </button>
        </div>
      </div>

      <div class="layui-form-item custom-add-alert-edit">
        <div class="header">修改分组信息</div>
        <div class="layui-inline">
          <label class="layui-form-label">ID</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-edit-id"
            />
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">分组名</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-edit-name"
              value="分组1"
            />
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">宽度</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-edit-width"
              value="200"
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">高度</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-edit-height"
              value="200"
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">边框颜色</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-edit-color"
              value="0,0,0"
            />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">背景颜色</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-add-alert-edit-bg-color"
              value=""
            />
          </div>
        </div>
        <div style="text-align: center">
          <button
            type="button"
            class="layui-btn"
            onclick="editor.utils.toEdit();"
          >
            确定
          </button>
          <button
            type="button"
            class="layui-btn"
            onclick="$('.custom-add-alert-edit').hide()"
          >
            关闭
          </button>
        </div>
      </div>

      <div class="layui-form-item custom-node-alert-info">
        <div class="header">编辑节点信息</div>
        <div class="layui-inline">
          <label class="layui-form-label">显示名称</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-node-alert-info-show-name"
              value=""
            />
          </div>
        </div>
        <!-- <div class="layui-inline">
          <label class="layui-form-label">节点类型</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-node-alert-info-name"
              value=""
              placeholder="1为电表"
            />
          </div>
        </div> -->
        <div class="layui-inline">
          <label class="layui-form-label">参数编号</label>
          <div class="layui-input-inline" style="width: 180px">
            <input
              name=""
              autocomplete="off"
              class="layui-input custom-node-alert-info-id"
            />
          </div>
        </div>

        <div style="text-align: center">
          <button
            type="button"
            class="layui-btn"
            onclick="editor.utils.toEditNode();"
          >
            确定
          </button>
          <button
            type="button"
            class="layui-btn"
            onclick="$('.custom-node-alert-info').hide()"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </body>

  <!-- js of 3rd party  -->
  <script
    src="static/jquery-3.3.1/jquery-3.3.1.min.js"
    type="text/javascript"
  ></script>
  <script src="static/layui-2.3.0/layui.all.js" type="text/javascript"></script>
  <!-- js of this project  -->
  <script src="static/jtopo/js/util.js" type="text/javascript"></script>
  <script
    src="static/jtopo/js/jtopo-0.4.8-dev.js"
    type="text/javascript"
  ></script>
  <script src="static/jtopo/js/jtopo-editor.js" type="text/javascript"></script>
  <script src="static/jtopo/js/initParams.js" type="text/javascript"></script>
  <script type="text/javascript">
    // 设置canvas画布大小
    var canvas = document.getElementById('topology-canvas');
    canvas.height = $(document).height() - $('.layui-header').height() - 12;

    $(document).ready(function () {
      // 选择连线方式后的css样式
      $('#link-line').click(function () {
        $(this).css('background-color', 'darkgray');
        $('#link-foldline-h').css('background-color', 'white');
        $('#link-foldline-v').css('background-color', 'white');
        $('#link-flexline-h').css('background-color', 'white');
        $('#link-flexline-v').css('background-color', 'white');
        $('#link-curveline').css('background-color', 'white');
      });
      $('#link-foldline-h').click(function () {
        $(this).css('background-color', 'darkgray');
        $('#link-line').css('background-color', 'white');
        $('#link-foldline-v').css('background-color', 'white');
        $('#link-flexline-h').css('background-color', 'white');
        $('#link-flexline-v').css('background-color', 'white');
        $('#link-curveline').css('background-color', 'white');
      });
      $('#link-foldline-v').click(function () {
        $(this).css('background-color', 'darkgray');
        $('#link-line').css('background-color', 'white');
        $('#link-foldline-h').css('background-color', 'white');
        $('#link-flexline-h').css('background-color', 'white');
        $('#link-flexline-v').css('background-color', 'white');
        $('#link-curveline').css('background-color', 'white');
      });
      $('#link-flexline-h').click(function () {
        $(this).css('background-color', 'darkgray');
        $('#link-line').css('background-color', 'white');
        $('#link-foldline-h').css('background-color', 'white');
        $('#link-foldline-v').css('background-color', 'white');
        $('#link-flexline-v').css('background-color', 'white');
        $('#link-curveline').css('background-color', 'white');
      });
      $('#link-flexline-v').click(function () {
        $(this).css('background-color', 'darkgray');
        $('#link-line').css('background-color', 'white');
        $('#link-foldline-h').css('background-color', 'white');
        $('#link-foldline-v').css('background-color', 'white');
        $('#link-flexline-h').css('background-color', 'white');
        $('#link-curveline').css('background-color', 'white');
      });
      $('#link-curveline').click(function () {
        $(this).css('background-color', 'darkgray');
        $('#link-line').css('background-color', 'white');
        $('#link-foldline-h').css('background-color', 'white');
        $('#link-foldline-v').css('background-color', 'white');
        $('#link-flexline-h').css('background-color', 'white');
        $('#link-flexline-v').css('background-color', 'white');
      });

      // 节点树中每个节点的拖放动作定义给拓扑图编辑器
      var nodes = $("[topo-div-type='topo-node']");
      var nodeLength = nodes.length;
      for (var i = 0; i < nodeLength; i++) {
        var text = $(nodes[i]).find('span').eq(0).text();
        editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
      }
      // 加载网络拓扑图
      editor.loadTopology(
        `https://electricity-api-service-pre.airqualitychina.cn/v1/enterprise-flowchart`,
        'img/backimg.png'
      );
    });
  </script>
</html>
